<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">按钮一</button>
    <button class="btn2">按钮二</button>
    <script>
        // https://www.bootcdn.cn/  查看 js 常用 库及插件的地址线上地址。

        // 利用 高阶函数 闭包 缓存 timer 的值；

        function debounce(fn, delay) {
            // fn 是需要执行的函数逻辑
            // 间隔的时间 
            var timer;
            return function () {
                clearTimeout(timer);
                if (!timer) {
                    fn();
                }
                timer = setTimeout(function () {
                    timer = null;
                }, delay);
            }
        }

        document.querySelector(".btn1").onclick =debounce(function(){
            console.log("防抖里需要执行的逻辑")
        },2000)

        document.querySelector(".btn2").onclick = debounce(function(){
            console.log("防抖2222");
        },2000)






    </script>
</body>

</html>